<template>
  <el-card class="box-card">
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      :default-checked-keys="checkNode"
      highlight-current
      @node-click="nodeClick"
      @check-change="checkChange"
      @check="checkCheck"
      :props="defaultProps"
    >
    </el-tree>
    <el-button @click="btn">dsadasd</el-button>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      checkNode: [], // 当前选中的节点
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 4",
              children: [
                {
                  id: 9,
                  label: "三级 9",
                },
                {
                  id: 10,
                  label: "三级 10",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 5",
            },
            {
              id: 6,
              label: "二级 6",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 7",
            },
            {
              id: 8,
              label: "二级 8",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    // var that = this;
    // [1, 4, 9].forEach((i, n) => {
    //   var node = that.$refs.tree.getNode(i)
    //   console.log(node.isLeaf)
    //   if (node.isLeaf) {
    //     that.$refs.tree.setChecked(node, true)
    //   }
    // })
  },
  methods: {
    btn() {
      // this.$refs.tree.getCheckedNodes([1, 4, ], true).map(i => i.id)
      this.$refs.tree.setCheckedKeys([1, 4, 9], false);
      let _this = this;
      _this.$data.thisRefTree = setInterval(() => {
        row.menus.split(",").forEach((i) => {
          let node = _this.$refs.tree.getNode(i);
          if (node.isLeaf) {
            _this.$refs.tree.setChecked(node, true);
          }
        });
        clearInterval(_this.$data.thisRefTree);
      }, 200);
    },
    // 节点被点击时的回调
    nodeClick(a, b, c) {
      // console.log(a, b, c)
    },
    checkCheck(a, b) {
      // if (b.halfCheckedKeys.length === 0) {
      //   console.log(b.checkedKeys)
      // } else {
      console.log("半选状态下的id父级", b.halfCheckedKeys); // checkedKeys
      // }
      console.log("后端需要的数组", b.checkedKeys);
      console.log("合并后", b.checkedKeys.concat(b.halfCheckedKeys));
      // let res = b.checkedKeys.concat(b.halfCheckedKeys)
      // let abc = {
      //   roleType: 'dev',
      //   menuNo: res
      // }
      // console.log(abc)
      // if (b.checkedKeys.includes(a.id)) { // 绑定操作
      //   console.log('绑定操作****', b.checkedKeys)
      // } else {
      //   // this.$refs.tree.setCheckedKeys([])
      //   console.log('解绑操作:')
      // }
    },
    // 节点选中状态发生变化时的回调
    checkChange(a, b, c) {
      // console.log(
      //   'aaaaaaaa', a,
      //   'bbbbbbbb', b,
      //   'cccccccc', c
      // )
    },
    // 通过 node 获取
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
      this.$refs.tree.setCheckedKeys([3]);
    },
    // 通过 key 获取
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },
    // 通过 node 设置
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1",
        },
        {
          id: 9,
          label: "三级 1-1-1",
        },
      ]);
    },
    // 通过 key 设置
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    // 清空
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
  },
};
</script>

<style scoped lang="less">
.el-card {
  height: calc(100vh - 40px);
}
</style>
